<template>
	<div>

		<el-tabs @tab-click="changeTag" v-model="activeName" tab-position="left" style="min-height:500px">
			<el-tab-pane v-for="(item,index) in data.list" :key="index" :name="item.id">
				<template #label>
					<span> <i v-if="item.icon" :class="item.icon"></i> {{item.title}}</span>
				</template>
				<systemGroupValue :column="data.column" :table="data.tabelList" :gid="data.gid" :resulf="resulf" />
			</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		getTags,
		getGroup,
		saveConfig,
		getGroupValue
	} from '/@/api/system.js'
	import {
		reactive,
		onMounted,
		toRefs,
		computed,
		ref,
		watch
	} from 'vue'
	import systemGroupValue from '/@/components/from/SystemGroupValue.vue'
	import {
		useRoute
	} from "vue-router"
	export default {
		name: "systemGroup",
		components: {
			systemGroupValue
		},
		setup() {
			const route = useRoute(); // 第一步
			const data = reactive({
				list: [],
				column: [],
				tabelList: [],
				gid: 0
			})
			const activeName = ref(0);
			const tid = ref(0);
			const save = () => {

				let dd = data.config;

				if (dd && dd.length > 0) {
					saveConfig(dd).then(res => {
						ElMessage({
							message: res.message || '保存成功',
							type: 'success',
							duration: 3000
						})
					})
				}

			}
			const changeTag = (tab, event) => {

			}

			const getGroupList = async (tid) => {
				await getGroup({
					tid: tid
				}).then(res => {

					data.gid = res.data.id
					getGroupVaueList(data.gid, res)
					data.column = res.data.field.concat([{
						field: 'sort',
						name: "排序",
						model: "inputNumber"
					}])


				})
			}

			const getGroupVaueList = async (gid, res) => {
				await getGroupValue({
					gid: gid
				}).then(res1 => {

					let data1 = [];
					res1.data.forEach(groupVaue => {
						let value = {}
						value["id"] = groupVaue.id
						value["sort"] = {
							"value": groupVaue.sort || 0,
							"model": "input"
						}
						res.data.field.forEach(field => {
							value[field.field] = {
								"value": groupVaue.value[field.field],
								"model": field.model
							}
						})
						data1.push(value);
					})
					data.tabelList = data1
				})
			}
			const resulf = () => {
				getGroupList(tid.value)
			}
			onMounted(() => {
				getTags({
					type: 1,
					id: route.query.id
				}).then(res => {
					data.list = res.data
					if (data.list && data.list.length > 0)
						activeName.value = data.list[0].id
				})
			})
			watch(activeName, (np, op) => {
				if (np) {
					tid.value = np
					data.gid = 0;
					data.column = []
					data.tabelList = []
					getGroupList(np)
				}
			})
			return {
				data,
				save,
				changeTag,
				activeName,
				resulf
			}
		}
	}
</script>

<style>
</style>
